<template>
  <div class="guide_content" v-if="dialogVisible">
    <div class="guide_mask">
      <!-- 第一步 -->
      <div v-if="step === 1">
        <el-popover placement="bottom" width="308" trigger="manual" v-model="visible">
          <div class="popover_view">
            <div class="text_1">hello，欢迎使用“象过河云进销存系统”，开始我们的体验之旅吧！</div>
            <div class="bottom_btn">
              <el-button type="primary" class="next_btn" @click="nextClick">下一步</el-button>
              <el-button type="text" @click="skipClick">跳过</el-button>
            </div>
          </div>
          <div
            slot="reference"
            class="novice-navigation first"
            :style="{'margin-left': rect.left + 'px', 'margin-top': rect.top + 'px', 'width': rect.width + 'px', 'height': rect.height + 'px'}"
          >
            <span class="navigation-text">{{ $t(`message.navbar.navigation`) }}</span>
          </div>
        </el-popover>
      </div>

      <!-- 第二步 -->
      <div v-else-if="step === 2">
        <el-popover placement="bottom" width="274" trigger="manual" v-model="visible">
          <div class="popover_view">
            <div style="font-size:14px;font-weight:600;color: #1993FB;">账套管理</div>
            <div class="text_2">点击这里，下来可以选择账套，并可以对自己的账套信息进行管理。</div>
            <div class="bottom_btn">
              <el-button type="primary" class="next_btn" @click="nextClick">下一步</el-button>
              <el-button type="text" @click="skipClick">跳过</el-button>
            </div>
          </div>
          <div
            slot="reference"
            class="book_view"
            :style="{'margin-left': rect.left + 'px', 'margin-top': rect.top + 10 + 'px', 'width': rect.width + 'px', 'height': rect.height - 20 + 'px'}"
          >
            <span style="color:#77A7D8;font-size: 14px;">{{ bookName }}</span>
            <i class="el-icon-caret-bottom" style="color:#77A7D8"></i>
          </div>
        </el-popover>
      </div>

      <!-- 第三步 -->
      <div v-else-if="step === 3">
        <el-popover placement="bottom" width="274" trigger="manual" v-model="visible">
          <div class="popover_view">
            <div style="font-size:14px;font-weight:600;color: #1993FB;">邀请分享</div>
            <div class="text_2">点击这里，可以分享客户注册使用软件。也可以邀请员工加入公司。</div>
            <div class="bottom_btn">
              <el-button type="primary" class="next_btn" @click="nextClick">下一步</el-button>
              <el-button type="text" @click="skipClick">跳过</el-button>
            </div>
          </div>

          <div
            class="share"
            slot="reference"
            :style="{'margin-left': rect.left + 'px', 'margin-top': rect.top + 'px', 'width': rect.width + 'px', 'height': rect.height + 'px'}"
          >
            <img class="share_img" :src="require('@/assets/navbar/share.png')" alt="分享" />
          </div>
        </el-popover>
      </div>

      <!-- 第四步 -->
      <div v-else-if="step === 4">
        <el-popover placement="bottom" width="274" trigger="manual" v-model="visible">
          <div class="popover_view">
            <div style="font-size:14px;font-weight:600;color: #1993FB;">创建桌面快捷方式</div>
            <div class="text_2">点击图标，可以创建桌面快捷方式，便捷登录。</div>
            <div class="bottom_btn">
              <el-button type="primary" class="next_btn" @click="nextClick">下一步</el-button>
              <el-button type="text" @click="skipClick">跳过</el-button>
            </div>
          </div>

          <div
            class="share"
            slot="reference"
            :style="{'margin-left': rect.left + 'px', 'margin-top': rect.top + 'px', 'width': rect.width + 'px', 'height': rect.height + 'px'}"
          >
            <img class="share_img" :src="require('@/assets/navbar/shortcut.png')" alt="桌面快捷方式" />
          </div>
        </el-popover>
      </div>

      <!-- 第五步 -->
      <div v-else-if="step === 5">
        <el-popover placement="top-start" width="274" trigger="manual" v-model="visible">
          <div class="popover_view">
            <div style="font-size:14px;font-weight:600;color: #1993FB;">系统设置</div>
            <div class="text_2">对系统配置、权限设置、账套管理、操作日志、价格优先级设置。</div>
            <div class="bottom_btn">
              <el-button type="primary" class="next_btn" @click="nextClick">下一步</el-button>
              <el-button type="text" @click="skipClick">跳过</el-button>
            </div>
          </div>

          <div
            class="userinfo"
            slot="reference"
            :style="{'margin-left': rect.left + 'px', 'margin-top': rect.top + 'px', 'width': rect.width + 'px', 'height': rect.height + 'px'}"
          >
            <svg-icon icon-class="setting"></svg-icon>
          </div>
        </el-popover>
      </div>

      <!-- 第六步 -->
      <div v-else-if="step === 6">
        <el-popover placement="bottomEnd" width="274" trigger="manual" v-model="visible">
          <div class="popover_view">
            <div style="font-size:14px;font-weight:600;color: #1993FB;">左侧导航设置</div>
            <div class="text_2">对左侧导航进行上下位置移动、显示和隐藏管理。</div>
            <div class="bottom_btn">
              <el-button type="primary" class="next_btn" @click="nextClick">下一步</el-button>
              <el-button type="text" @click="skipClick">跳过</el-button>
            </div>
          </div>

          <div
            class="userinfo"
            slot="reference"
            :style="{'margin-left': rect.left + 'px', 'margin-top': rect.top + 'px', 'width': rect.width + 'px', 'height': rect.height + 'px'}"
          >
            <svg-icon icon-class="b4"></svg-icon>
          </div>
        </el-popover>
      </div>

      <!-- 第七步 -->
      <div v-else-if="step === 7">
        <el-popover placement="top-start" width="274" trigger="manual" v-model="visible">
          <div class="popover_view">
            <div style="font-size:14px;font-weight:600;color: #1993FB;">首页应用设置</div>
            <div class="text_2">可以对首页应用进行自定义设置，只显示自己常用的应用。</div>
            <div class="bottom_btn">
              <el-button type="primary" class="next_btn" @click="nextClick">下一步</el-button>
              <el-button type="text" @click="skipClick" v-if="openAccountValue === 3">跳过</el-button>
            </div>
          </div>

          <div
            class="edit"
            slot="reference"
            :style="{'margin-left': rect.left - 5 + 'px', 'margin-top': rect.top - 5 + 'px', 'width': rect.width + 10 + 'px', 'height': rect.height + 10 + 'px'}"
          >
            <i class="el-icon-edit-outline" :size="16"></i>
          </div>
        </el-popover>
      </div>

      <!-- 第八步 -->
      <div v-else-if="step === 8">
        <el-popover placement="top-start" width="274" trigger="manual" v-model="visible">
          <div class="popover_view">
            <div style="font-size:14px;font-weight:600;color: #1993FB;">上一单、下一单</div>
            <div class="text_2">点击按钮，可以查看上一单和下一单的单据。</div>
            <div class="bottom_btn">
              <el-button type="primary" class="next_btn" @click="nextClick">下一步</el-button>
              <el-button type="text" @click="skipClick">跳过</el-button>
            </div>
          </div>

          <div
            class="arrow_view"
            slot="reference"
            :style="{'margin-left': rect.left - 5 + 'px', 'margin-top': rect.top - 5 + 'px', 'width': rect.width + 10 + 'px', 'height': rect.height + 10 + 'px'}"
          >
            <div class="arrow_btn">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="arrow_btn">
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </el-popover>
      </div>

      <!-- 第九步 -->
      <div v-else-if="step === 9">
        <el-popover placement="bottom" width="274" trigger="manual" v-model="visible">
          <div class="popover_view">
            <div style="font-size:14px;font-weight:600;color: #1993FB;">列配置</div>
            <div class="text_2">点击按钮可以对列配置选择显示或隐藏。</div>
            <div class="bottom_btn">
              <el-button type="primary" class="next_btn" @click="skipClick">完成</el-button>
            </div>
          </div>

          <div
            class="edit"
            slot="reference"
            :style="{'margin-left': rect.left - 5 + 'px', 'margin-top': rect.top - 5 + 'px', 'width': rect.width + 10 + 'px', 'height': rect.height + 10 + 'px'}"
          >
            <i class="set_up el-icon-s-tools"></i>
          </div>
        </el-popover>
      </div>

      <!-- 第十步 -->
      <div v-else-if="step === 10">
        <el-popover placement="bottom" width="274" trigger="manual" v-model="visible">
          <div class="popover_view">
            <div style="font-size:14px;font-weight:600;color: #1993FB;">提示</div>
            <div class="text_2">请选择开账方式。</div>
            <div class="bottom_btn">
              <el-button type="primary" class="next_btn" @click="skipClick">完成</el-button>
            </div>
          </div>
          <div
            slot="reference"
            class="open_view"
            :style="{'margin-left': rect.left + 'px', 'margin-top': rect.top + 'px', 'width': rect.width + 30 + 'px', 'height': rect.height + 'px'}"
          >
            <span class="open_span">开账操作</span>
          </div>
        </el-popover>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      dialogVisible: false,
      visible: false,
      rect: {},
      step: 1,
      bookName: '',
      openAccountValue: -1,
    }
  },
  created () {
    this.openAccountValue = this.$store.getters.openAccountValue
  },
  mounted () {
    console.log('guideIndex   mounted');
    // 监听接收消息  Novice guide
    const that = this
    this.$EventBus.$on('showNoviceGuide', function (res) {
      console.log(res);
      that.rect = res.rect
      that.bookName = res.bookName
      that.dialogVisible = true
      that.step = res.step
      setTimeout(() => {
        that.visible = true
      }, 200);

    })
  },
  watch: {
    '$store.getters.openAccountValue'(val) {
      this.openAccountValue = val
    }
  },
  beforeDestroy () {
    console.log('guideIndex   beforeDestroy');
    this.$EventBus.$off('showNoviceGuide')
  },
  methods: {
    skipClick () {
      this.visible = false
      this.dialogVisible = false
    },
    nextClick () {
      this.visible = false
      let num = this.step + 1
      this.step = 0
      let path = this.$route.path
      if (num == 7 && path != '/dashboard/analysis') { //首页
        this.$router.push('/dashboard/analysis')
        setTimeout(() => {
          this.$EventBus.$emit('getGuideItem', num)
        }, 500);
      } else if (num == 8) { 
        //未开账可以查看新手导航，看完之后提示，请选择开账方式。然后再跳转到开账方式进行选择，开账之后跳转采购订单
        if (this.openAccountValue === 3) {
          if (path != '/purchaseManage/purchaseBill/billPurchaseOrder') {
            this.$router.push('/purchaseManage/purchaseBill/billPurchaseOrder')
          }
        } else {
          num = 10
          if (path != '/business/purchaseBill/SystemConfiguration') {
            this.$router.push('/business/SystemConfiguration')
          }
        }
        setTimeout(() => {
          this.$EventBus.$emit('getGuideItem', num)
        }, 500);
      } else {
        this.$EventBus.$emit('getGuideItem', num)
      }
      // else if (num == 8 && path != '/purchaseManage/purchaseBill/billPurchaseOrder') { //采购订单
      //   this.$router.push('/purchaseManage/purchaseBill/billPurchaseOrder')
      //   setTimeout(() => {
      //     this.$EventBus.$emit('getGuideItem', num)
      //   }, 500);
      // }
      // else {
      //   this.$EventBus.$emit('getGuideItem', num)
      // }
    }
  }
}
</script>
<style>
.guide_content {
  height: 100%;
  position: relative;
}
.guide_mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1999;
  background-color: rgba(0, 0, 0, 0.4);
}
.novice-navigation {
  border: 1px solid #2695f8;
  opacity: 1;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigation-text {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #1993fb;
  opacity: 1;
}
.first {
  margin-left: 20px;
  padding: 5px 6px;
}
.popover_view {
  padding: 0 10px;
}
.bottom_btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
}
.next_btn {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px !important;
  line-height: 30px;
}
.text_1 {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 28px;
  color: #fd6c21;
}
.text_2 {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 10px;
}
.book_view {
  background-color: rgb(9, 20, 37);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.share {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(9, 20, 37);
  padding: 10px;
}
.share_img {
  width: 28px;
  height: 28px;
  opacity: 1;
}
.edit {
  background-color: #fff;
  margin: 0;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #1b94fb;
  display: flex;
  justify-content: center;
  align-items: center;
}
.open_view {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.open_span {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  line-height: 22px;
  color: #1b94fb;
}
.arrow_view {
  display: flex;
  justify-content: space-between;
  /* background-color: #f0f2f5; */
  padding: 5px;
}
.arrow_btn {
  width: 30px;
  height: 30px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
.screen_right {
  background: #ffffff;
}
.set_up {
  line-height: 20px;
  font-size: 20px;
  color: rgb(153, 153, 153);
}
</style>